<template>
	<view>
		<view class="flex bg-white  p-t-20 tab-top">
			<view class="flex-1 tab-item" :class="active==item.id?'active':''" v-for="item in tabList" :key="item.id" @click="active=item.id">
				{{item.name}}
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" top="120">
			<view class="p-l-30 p-r-30 p-t-10">
				<carry-item v-for="item in list" :item="item" :type="type"></carry-item>
			</view>
			
		</mescroll-body>		
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import {userLists,getCarryList} from '@/api/carry';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				active: 1,
				upOption: {
					auto: false,
					empty: {
						icon: '/static/images/news_null.png',
						tip: "暂无数据",
					}
				},
				list:[],
				tabList:[
					{
						id:1,
						name:"我的发布"
					},
					{
						id:2,
						name:'我的搬运'
					}
				],
				type:10
			}
		},
		onLoad() {
			uni.$on('updateList',()=>{
				this.downCallback();
			})
		},
		onUnload(){
			uni.$off('updateList')
		},
		watch:{
			active(val){
				this.downCallback();
			}
		},
		methods: {
			upCallback(page) {
				let {active} = this;
				if(active==1){
					this.type = 10
					userLists({
						page:page.num,
						limit:page.size
					}).then(({
						data
					}) => {
						if (page.num == 1) this.list = [];
						let curPageData = data.lists;
						let curPageLen = curPageData.length;
						let totalSize = data.count;
						this.list = this.list.concat(curPageData);
						this.mescroll.endBySize(curPageLen, totalSize)
					}).catch(() => {
						this.mescroll.endErr()
					})
				}
				else if(active==2){
					this.type = 20
					getCarryList({
						page:page.num,
						limit:page.size
					}).then(({
						data
					}) => {
						if (page.num == 1) this.list = [];
						let curPageData = data.lists;
						let curPageLen = curPageData.length;
						let totalSize = data.count;
						this.list = this.list.concat(curPageData);
						
						this.mescroll.endBySize(curPageLen, totalSize)
					}).catch(() => {
						this.mescroll.endErr()
					})
				}
				
				
			},
		}
	}
</script>

<style lang="scss">
	.tab-item{
		text-align: center;
		font-weight: bold;
		position: relative;
		&.active{
			color: #eb7054;
			&::after{
				content: '';
				display: block;
				width: 15%;
				height: 4px;
				margin: 8px auto 0 auto;   
				background-color: #eb7054;
			}
		}
		&::after{
			content: '';
			display: block;
			width: 15%;
			height: 4px;
			margin: 8px auto 0 auto;   
		
		}
	}
	.tab-top{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 20;
	}
</style>
